<script setup lang="ts">
import { userrequsertFn } from '@/api/UserApi';
import converted from '@/assets/converted.svg'
import qq from '@/assets/qq.svg'
import wx from '@/assets/WX.svg'
import xl from '@/assets/XL.svg'
import { useStore } from '@/stores/user';
import { showToast } from 'vant';
import { ref } from 'vue';
import type { Ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const store = useStore()
const username: Ref<string> = ref('')
const password: Ref<string> = ref('')

function loginClick() {

    userrequsertFn({
        action: 'login',
        username: username.value,
        password: password.value
    }).then(res => {
        console.log(res);
        if (res.data.code == 200) {
            router.push('/home')
            localStorage.setItem('userid',res.data.data.user.user_id)
            localStorage.setItem('token',res.data.data.token)
            showToast(res.data.message)
        } else {
            showToast(res.data.message)
            username.value = ''
            password.value = ''
        }
    }).catch(err =>{
        console.log(err);
        showToast(err.data.message)
    })


    // if (username.value == store.username && password.value == store.password) {
    //     router.push('/home')
    //     showToast('登录成功')
    // } else {
    //     showToast('用户名或密码错误')
    // }
}



function pwdclick() {

    router.push('/pwd')
}

</script>



<template>
    <div class="container">
        <div class="loginBox">
            <div class="box">
                <van-icon size="50" :name="converted" />
                <h1>WheatAi</h1>
            </div>

            <van-form>
                <van-cell-group inset>
                    <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                </van-cell-group>
                <a @click="pwdclick" class="wpsd">忘记密码？</a>
                <div style="margin: 16px;">
                    <van-button @click="loginClick" color="#4f52ff" round block type="primary">
                        提交
                    </van-button>
                </div>
            </van-form>

            <van-divider>第三方账号登录</van-divider>

            <div class="linkbtn">
                <van-button color="#fff" :icon="qq" type="primary" />
                <van-button color="#fff" :icon="wx" type="primary" />
                <van-button color="#fff" :icon="xl" type="primary" />
            </div>

            <div>
                <p>没有账户？<a @click="$router.push('/register')">注册</a></p>
            </div>
        </div>
    </div>

</template>

<style lang="scss" scoped>
.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loginBox {
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .van-cell-group {
        margin-bottom: 20px;
    }

    .wpsd {
        position: relative;
        left: 240px;
    }

    .linkbtn {
        width: 70%;
        display: flex;
        justify-content: space-around;
    }
}
</style>